const prog_uchar http_404header[] PROGMEM = "HTTP/1.1 404 Not Found\nServer: arduino\nContent-Type: text/html\n\n<html><head><title>404</title></head><body><h1>404: Sorry, that page cannot be found!</h1></body>";
const  prog_uchar httpHeader[] PROGMEM = "HTTP/1.0 200 OK\nServer: arduino\nContent-Type: text/html\n\n";
const  prog_uchar htmlHeader[] PROGMEM ="<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>"
"<html xmlns='http://www.w3.org/1999/xhtml'>"
"<head>"
    "<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />"
    "<meta name='apple-touch-fullscreen' content='YES' />"
    "<title>Web Enabled Garage Door</title>"
    "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>"
    "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>"
    "<script type='text/javascript' src='http://dl.dropbox.com/u/3547649/ScriptLib/tweet/jquery.tweet.js'></script>"
    "<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/dot-luv/jquery-ui.css' />"
    "<link rel='stylesheet' href='http://dl.dropbox.com/u/3547649/ScriptLib/tweet/jquery.tweet.css' />"
    "<style type='text/css'>"
       "#slider{margin: 10px;}"
        ".body{vertical-align: top;text-align: center;color: White;margin: 0 auto;border: 1px solid white;}"
        "#wrapper{width: 305px;height:400px;border:none;margin: 0 auto;}"
    "</style>"
    "<script type='text/javascript'>"
    "var pwd = '';"
        "$(function () {"
        "$('button').button();"
            "$('#tabs').tabs();"
            "showlogin();"
        "});"
       "function login() {"
                        "$('#loginSubmit').hide();"
                        "$('#loginCounter').hide();"
			"loginSubmit.style.display = 'none';"
			"waitingfront.style.display = 'inline';"
			"encode();"
			"$('#pwdInput').val('');"
			"loginPost();"
			//
       "}"
		"function loginPost() {"
			"var repeatCount = 0;"
                        "var ret;"
			"do {"
				"$.post('/door', { cmd: '8', pwd: pwd },"
					"function(data){"
						"ret = postPause(data);"
				        "});"
				"repeatCount++;"
			 "} while (ret == false && repeatCount < 5)"
			 
			 "if (ret == false && repeatCount > 4) {"
                                "$('#loginCounter').show();"
				"$('#loginCounter strong').text('Could not reach server in ' + repeatCount + ' attempts. Locked Out!' + count);"
                                "loginSubmit.style.display = 'inline';"
                                "waitingfront.style.display = 'none';"
				"}"
		"}"
	"function postPause(data) {"
          "var pass = 'test';"
	  "var count = 'test';"
          "$(data).find('auth').each(function(){"
            "pass = $(this).text();"
          "});"
          "$(data).find('count').each(function(){"
            "count = $(this).text();"
          "});"
			"if (pass == 1) {"
				"$('#bodyPage').show();"
				"$('#loginPage').hide();"
				"return true;"
			"} else {"
				"if (count == 'test') {"
				  "return false;"
				"}"
				"if (count != 'Locked Out' && count.length == 1) {"
                                        "$('#loginCounter').show();"
					"$('#loginCounter strong').text('Login failed!  Used ' + count + ' of 5 attempts.');"
					"loginSubmit.style.display = 'inline';"
                                        "waitingfront.style.display = 'none';"
					"return true;"
				"}"
				"else {"
                                        "$('#loginCounter').show();"
					"$('#loginCounter strong').text(count + '!');"
                                        "waitingfront.style.display = 'none';"
					"return true;"
				"}"
			"}"
        "} "
       "function showlogin() {"
			"loginSubmit.style.display = 'none';"
			"waitingfront.style.display = 'inline';"
			"$('#loginPage').show();"
			"$('#pwdInput').focus();"
			"loginSubmit.style.display = 'inline';"
			"waitingfront.style.display = 'none';"
       "} "
	"function encode() {"
         "var input = $('#pwdInput').val();"
         "var _keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; "
         "var output ='';"
		"var chr1, chr2, chr3, enc1, enc2, enc3, enc4;"
		"var i = 0;"
		"while (i < input.length) {"
			"chr1 = input.charCodeAt(i++);"
			"chr2 = input.charCodeAt(i++);"
			"chr3 = input.charCodeAt(i++);"
			"enc1 = chr1 >>2;"
			"enc2 = ((chr1 & 3) << 4) | (chr2 >>4);"
			"enc3 = ((chr2 & 15) << 2) | (chr3 >>6);"
			"enc4 = chr3 & 63;"
			"if (isNaN(chr2)) {"
				"enc3 = enc4 = 64;"
			"} else if (isNaN(chr3)) {"
				"enc4 = 64;"
			"}"
 			"output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4);"
		"}"
            "pwd = output;"
        "}"
        
        "function process(xml) {"
        "var leftstatus = 0;"
        "var rightstatus = 0;"
         "$(xml).find('left').each(function(){"
           "leftstatus = $(this).text();"
          "});"
          "$(xml).find('right').each(function(){"
           "rightstatus = $(this).text();"
          "});"
          "$('#waiting').hide();"
          "if( leftstatus == 'open') { $('#leftopen').show();}"
          "if( leftstatus == 'closed') { $('#leftclosed').show();}"
          "if( leftstatus == 'unknown') { $('#leftunknown').show();}"
          "if( rightstatus == 'open') { $('#rightopen').show();}"
          "if( rightstatus == 'closed') { $('#rightclosed').show();}"
          "if( rightstatus == 'unknown') { $('#rightunknown').show();}"
          "refresh.style.visibility = 'visible';"
        "}";
const  prog_uchar message1[] PROGMEM = 
        "function history() {}"

        "function status() {"
            "refresh.style.visibility = 'hidden';"
            "$('#waiting').show();"
            "$('#leftopen').hide();"
            "$('#leftclosed').hide();"
            "$('#leftunknown').hide();"
            "$('#rightopen').hide();"
            "$('#rightclosed').hide();"
            "$('#rightunknown').hide();"
            "$.post('/door', { cmd: '7', pwd: pwd },"
            "function(data){"
               "process(data);"
             "});"
        "}"
        "function OpenDoor() {"
        "if(confirm('Open door?')){"
            "opendoor.disabled=true;"
            "$.post('/door', { cmd: '1', pwd: pwd });"
            "opendoor.disabled=false;"
        "}}"
        "function CloseDoor() {"
        "if(confirm('Close door?')){"
            "$.post('/door', { cmd: '2', pwd: pwd });"
        "}}"
        "function ActuateDoor() {"
        "if(confirm('Toggle door?')){"
            "$.post('/door', { cmd: '3', pwd: pwd });"
        "}}"
        "function OpenDoor2() {"
        "if(confirm('Open door?')){"
            "$.post('/door', { cmd: '4', pwd: pwd });"
        "}}"
        "function CloseDoor2() {"
        "if(confirm('Close door?')){"
            "$.post('/door', { cmd: '5', pwd: pwd });"
        "}}"
        "function ActuateDoor2() {"
        "if(confirm('Toggle door?')){"
             "$.post('/door', { cmd: '6', pwd: pwd });"
        "}}"
    "</script>"
"</head>"
"<body style='font-size: 62.5%; background-color: #5F5A59;' onload='setTimeout(function() { window.scrollTo(0, 1) }, 100);' >"
    "<div id='wrapper' class='body'>"
        "<div id='loginPage'>"
			"<div class='ui-widget ui-corner-all ui-widget-content'><div class='ui-widget ui-corner-all ui-widget-header' style='height:30px;'><div class='ui-datepicker-month'>Login</div></div>"
				"<div style='padding-bottom: 13px;padding-left: 18px;padding-right: 18px;padding-top: 13px;'>"
					"<input type='password' id='pwdInput'></input>"
					"<br/><br/>"
					"<button id='loginSubmit' onclick='javascript:login();' style='display:none'>Authenticate</button>"
					"<div id='loginCounter' class='ui-widget' style='display:none'>"
						"<br/>"
						"<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"
							"<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"
							"<strong>Bad Password</strong></p>"
						"</div>"
					"</div>"
					"<div id='waitingfront' class='ui-widget' style='display:inline'>"
						"<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>"
							"<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>"
							"<strong>Please Wait...</strong></p>"
						"</div>"
					"</div>"
				"</div>"
			"</div>"
			"<br/><br/>"
		"</div>"
	"<div id='bodyPage' style='display:none'>"
		"<button id='refresh' onclick='javascript:status();'>Refresh</button><br /><br />"
		"<div id='tabs'>"
			"<ul>"
				"<li><a href='#tabs-1'>Controls</a></li>"
				"<li><a href='#tabs-2'>History</a></li>"
			"</ul>"
			"<div id='tabs-1'>"
				"<br />";
    
const  prog_uchar statusbuttons[] PROGMEM =
				"<button style='width:145px;height:40px;' id='opendoor' onclick='javascript:OpenDoor();'>Open Door</button><br />"
				"<button style='width:145px;height:40px;margin-top:4px;' id='closedoor' onclick='javascript:CloseDoor();'>Close Door</button><br />"
				"<button style='width:145px;height:40px;margin-top:4px;' id='actuate' onclick='javascript:ActuateDoor();'>Actuate Door</button><br />"
				"<br /><hr /><br />";
				
const  prog_uchar OneDoorStatus[] PROGMEM =
				"<div id='leftopen' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"
						"<strong>Door Open!</strong></p>"
					"</div>"
				"</div>"
				"<div id='leftclosed' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>"
						"<strong>Door Closed.</strong></p>"
					"</div>"
				"</div>"
				"<div id='waiting' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>"
						"<strong>Please Wait...</strong></p>"
					"</div>"
				"</div>"
				"<div id='leftunknown' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"
						"<strong>Door Partially Open!</strong></p>"
					"</div>"
				"</div>";

const  prog_uchar statusbuttonsTWO[] PROGMEM = 
				"<button style='width:130px;height:40px;display:inline' id='opendoor' onclick='javascript:OpenDoor();'>Open Left</button><button style='width:130px;height:40px;display:inline' id='opendoor2' onclick='javascript:OpenDoor2();'>Open Right</button><br />"
                "<button style='width:130px;height:40px;margin-top:4px;display:inline' id='closedoor' onclick='javascript:CloseDoor();'>Close Left </button><button style='width:130px;height:40px;margin-top:4px;display:inline' id='closedoor2' onclick='javascript:CloseDoor2();'>Close Right</button><br />"
                "<button style='width:130px;height:40px;margin-top:4px;display:inline' id='actuate' onclick='javascript:ActuateDoor();'>Run Left </button><button style='width:130px;height:40px;margin-top:4px;display:inline' id='actuate2' onclick='javascript:ActuateDoor2();'>Run Right</button>"
                "<br /><br /><hr /><br />";

const  prog_uchar StatusLeft[] PROGMEM = 
				"<div id='leftopen' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"
						"<strong>Left Door Open!</strong></p>"
					"</div>"
				"</div>"

				"<div id='leftclosed' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>"
						"<strong>Left Door Closed.</strong></p>"
					"</div>"
				"</div>"

				"<div id='leftunknown' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"
						"<strong>Left Door Partially Open!</strong></p>"
					"</div>"
				"</div>";

const  prog_uchar StatusRight[] PROGMEM = 
				"<br />"
				"<div id='rightopen' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"
						"<strong>Right Door Open!</strong></p>"
					"</div>"
				"</div>"

				"<div id='rightclosed' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-highlight ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>"
						"<strong>Right Door Closed.</strong></p>"
					"</div>"
				"</div>"

				"<div id='rightunknown' onmousedown='javascript:status();' class='ui-widget' style='display:none'>"
					"<div class='ui-state-error ui-corner-all' style='padding: 0 .7em;'>"
						"<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>"
						"<strong>Right Door Partially Open!</strong></p>"
					"</div>"
				"</div>";
const  prog_uchar messageEnd[] PROGMEM = "</div>"
            "<div id='tabs-2'>"
                "<div class='tweet'></div>"
            "</div>"
        "</div>"
    "</div>"
  "</div>"
"</body>"
"</html>";


